<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script>
        $(function () {
            $('.center').hide();

            $('#close').on('click', function () {
                $('.left').hide();
                $('.right').hide();
                $('.center').show();
            });
            $('#open').on('click', function () {
                $('.left').show();
                $('.right').show();
                $('.center').hide();
            });
        });
    </script>

    <style>
        .myFavorite {
            text-align: left;
            z-index: 3;
            position: fixed;
            top: 150px;
            right: 20px;
        }

        .left {
            float: left;
            background-color: rgba(237, 196, 158, 0.9);
            padding: 2ch 0 2ch 2.5ch;
            border-radius: 40px 0 40px 40px;
        }

        .right {
            float: right;
            background-color: rgba(237, 196, 158, 0.9);
            border-radius: 0 10px 10px 0;
        }

        .button {
            text-align: center;
            background-color: transparent;
            border-style: none;
            width: 20px;
            height: 20px;
            font-weight: 700;
        }

        .button:focus {
            border-radius: 10px;
            outline-color: rgb(233, 164, 101);
            color: rgb(233, 164, 101);
        }

        .center {
            float: right;
            background-color: rgba(237, 196, 158, 0.9);
            border-radius: 10px;
        }
    </style>
</head>
<body>

<div th:fragment="myFavorite">


    <div class="myFavorite" th:if="${session.account != null && session.account?.profile.listOption}">
        <div class="left">
            <h3>猜你喜欢: </h3>
            <p style="font-size: 16px">从这里挑选更多你喜欢的商品吧</p>
            <ul>


                    <li th:each="product:${session.myList}">
                        <a th:href="@{viewProduct(productId=${product.productId})}" th:text="${product.name}"></a>
                    </li>

            </ul>
        </div>
        <div class="right">
            <input value=">" class="button" id="close">
        </div>
        <div class="center">
            <input value="<" class="button" id="open">
        </div>
    </div>


</div>

</body>
</html>